<template>
	<view class="full-container">
		<tn-navbar back-text="每日签到" text-color="#333" fixed :bottom-shadow="false" bg-color="#fff"></tn-navbar>
		<view class="pos-rel">
			<view class="main-container">
				<view class="c-p-t-20 text-center">
					<text class="sign-title">每日签到</text>
				</view>
			</view>
			<view class="tran-img">
				<image
					src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E6%AF%8F%E6%97%A5%E7%AD%BE%E5%88%B0/u8590.svg"
					class="footer-main"></image>
			</view>
			<view class="tarn-move pos-abs c-flex c-row-center c-col-center">
				<view class="bg-color-white br-8">
					<view class="tarn-val">
						<view class="tran-center c-flex c-flex-nowrap c-row-between c-col-center">
							<view class="c-flex c-flex-nowrap">
								<view class="pos-rel">
									<view class="">
										<image class="date" src="/static/images/date.png"></image>
									</view>
									<view class="move-top">
										<image class="c-icon"
											src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E6%AF%8F%E6%97%A5%E7%AD%BE%E5%88%B0/u8616.svg">
										</image>
									</view>
									<view class="pos-abs pos-circle">
										<tn-icon name="success-circle-fill" color="#fb560a" size="42rpx"></tn-icon>
									</view>
								</view>
								<view class="c-p-l-5">
									<view class="">
										<text class="font-size-12 color-3333">你已累计连续打卡</text>
										<text class="font-size-12 color-6164 c-m-l-3 c-m-r-3">N</text>
										<text class="font-size-12 color-3333">天</text>
									</view>
									<view class="c-flex c-row-left c-col-center">
										<text class="font-size-20 font-w-7 color-476d">4</text>
										<text class="c-m-l-5 font-size-14 font-w-7 color-476d">积分</text>
									</view>
								</view>
							</view>
							<view class="">
								<view class="c-flex c-flex-nowrap c-row-left c-col-center">
									<tn-icon class="icon-center" name="success-square" size="40rpx" color="#6164FF" />
									<text class="c-m-l-2 font-size-13 color-6164">订阅</text>
								</view>
								<view class="c-m-t-5">
									<view class="sgin-btn c-flex c-row-center c-col-center">
										<text>签到</text>
									</view>
								</view>
							</view>
						</view>
						<view class="sign-count c-flex c-flex-nowrap c-m-t-10">
							<view class="sign-active sign-cmt">
								<view class="c-m-t-3 text-center">
									<text class="font-size-13 color-white">+1</text>
								</view>
								<view class="c-m-t-3 c-flex c-row-center c-col-center">
									<tn-icon name="success" color="#fff" size="30rpx" />
								</view>
							</view>
							<view class="sign-active sign-cmt">
								<view class="c-m-t-3 text-center">
									<text class="font-size-13 color-white">+2</text>
								</view>
								<view class="c-m-t-3 c-flex c-row-center c-col-center">
									<tn-icon name="success" color="#fff" size="30rpx" />
								</view>
							</view>
							<view class="sign-cmt">
								<view class="c-m-t-3 text-center">
									<text class="font-size-13 color-aaaa">+3</text>
								</view>
								<view class="c-m-t-3 c-flex c-row-center c-col-center">
									<tn-icon name="success" color="#7f7f7f" size="30rpx" />
								</view>
							</view>
							<view class="sign-cmt">
								<view class="c-m-t-3 text-center">
									<text class="font-size-13 color-aaaa">+4</text>
								</view>
								<view class="c-m-t-3 c-flex c-row-center c-col-center">
									<tn-icon name="success" color="#7f7f7f" size="30rpx" />
								</view>
							</view>
							<view class="sign-cmt">
								<view class="c-m-t-3 text-center">
									<text class="font-size-13 color-aaaa">+5</text>
								</view>
								<view class="c-m-t-3 c-flex c-row-center c-col-center">
									<tn-icon name="success" color="#7f7f7f" size="30rpx" />
								</view>
							</view>
							<view class="sign-cmt">
								<view class="c-m-t-3 text-center">
									<text class="font-size-13 color-aaaa">+6</text>
								</view>
								<view class="c-m-t-3 c-flex c-row-center c-col-center">
									<tn-icon name="success" color="#7f7f7f" size="30rpx" />
								</view>
							</view>
							<view class="sign-cmt">
								<view class="c-m-t-3 text-center">
									<text class="font-size-13 color-aaaa">+7</text>
								</view>
								<view class="c-m-t-3 c-flex c-row-center c-col-center">
									<tn-icon name="success" color="#7f7f7" size="30rpx" />
								</view>
							</view>
						</view>
						<view class="c-p-t-30 text-center">
							<text class="font-w-7 font-size-14 color-5555">· 规则·</text>
						</view>
						<view class="c-p-l-20 c-p-r-20 c-p-t-10">
							<text
								class="text-content font-size-12 color-5555">每日签到可获得天数等值积分，连续签到满7天后每天可获取7积分连签奖励。连续签到的日期不可中断，中断后连续签到的天数会从1天开始重新计算。</text>
						</view>
					</view>
					<view class="tarn-footer c-flex c-flex-nowrap">
						<view class="tarn-left c-flex c-flex-divide c-row-center c-col-center">
							<tn-icon class="middle" name="gift" color="#476dea" size="40rpx"></tn-icon>
							<text class="c-m-l-3 font-size-14 color-3333 middle">兑换记录</text>
						</view>
						<view class="tarn-right c-flex-divide c-flex c-row-center c-col-center">
							<tn-icon class="middle" name="empty-order" color="#476dea" size="40rpx"></tn-icon>
							<text class="c-m-l-3 font-size-14 color-3333 middle">积分明细</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tran-next-top c-flex c-row-center c-col-center">
			<view class="bg-color-white pos-rel c-p-t-20 br-8 tran-next">
				<view class="c-flex c-flex-nowrap c-row-center c-col-center">
					<view class="avater-cicrle cicrle-top">
						<image class="avater" src="https://q7.itc.cn/q_70/images03/20240423/6d236fae5c8f44ed9b60d977f32debb7.jpeg">
						</image>
					</view>
					<view class="c-m-l-30 avater-cicrle">
						<image class="avater"
							src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E6%AF%8F%E6%97%A5%E7%AD%BE%E5%88%B0/u8677.svg">
						</image>
					</view>
					<view class="c-m-l-30 avater-cicrle">
						<image class="avater"
							src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E6%AF%8F%E6%97%A5%E7%AD%BE%E5%88%B0/u8677.svg">
						</image>
					</view>
				</view>
				<view class="c-m-t-15 c-flex c-flex-nowrap c-row-center c-col-center">
					<view class="limit-btn">
						<tn-button shape="circle" bg-color="rgba(71, 109, 234, 1)" custom-class="my-btn"
							:custom-style="customStyle">
							<text class="color-white font-size-16 font-w-7">邀请好友 立即翻倍</text>
						</tn-button>
					</view>
				</view>
				<view class="pos-abs abs-top c-flex c-row-center c-col-center">
					<text class="font-size-12 color-3333">再拉2位好友助力可翻倍积分</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const customStyle = {
		'width': '570rpx',
		'height': '80rpx',
		'background-color': 'rgba(71, 109, 234, 1)',
		'box-shadow': '0 0 10rpx rgba(0, 0, 0, 0.2)',
		'border-radius': '40rpx'
	}
</script>

<style scoped lang="scss">
	.main-container {
		height: 227px;
		background: inherit;
		background-color: rgba(71, 109, 234, 1);
		background-image: url(https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E6%AF%8F%E6%97%A5%E7%AD%BE%E5%88%B0/u8589_div.jpg);
		background-repeat: no-repeat;
		/* background-size: 783px 584px; */
		background-position: left top;
		border: none;
		border-left: 0px;
		border-top: 0px;
		border-right: 0px;
		border-radius: 0px;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
		box-shadow: none;
	}

	.sign-title {
		font-family: '苹方 粗体', '苹方 中等', '苹方';
		font-weight: 700;
		font-style: normal;
		font-size: 96rpx;
		color: #FFFFFF;
	}

	.footer-main {
		height: 112rpx;
	}

	.tarn-move {
		top: 220rpx;
		left: 0;
		right: 0;

		.tarn-val {
			width: 716rpx;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			padding: 10rpx 20rpx;
		}

		.tran-center {
			.date {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}

	.move-top {
		transform: translateY(-20rpx) translateX(-12rpx);
	}

	.c-icon {
		width: 90rpx;
		height: 26rpx;
	}

	.sgin-btn {
		width: 150rpx;
		height: 60rpx;
		background: inherit;
		background-color: rgba(71, 109, 234, 1);
		border: none;
		border-radius: 30rpx;
		box-shadow: none;
		font-family: '苹方 中等', '苹方';
		font-weight: 400;
		font-style: normal;
		color: #FFFFFF;
	}

	.icon-center {
		vertical-align: middle;
	}

	.pos-circle {
		position: absolute;
		right: 10rpx;
		bottom: 25rpx;
	}

	.sign-count {
		grid-gap: 0 25rpx;
	}

	.sign-cmt {
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(242, 242, 242, 1);
		border: none;
		border-radius: 4rpx;
		box-shadow: none;
		font-family: '苹方 中等', '苹方';
		font-weight: 400;
		font-style: normal;
		color: #AAAAAA;

		&.sign-active {
			background-color: rgba(71, 109, 234, 1);
		}
	}

	.text-content {
		line-height: 48rpx;
	}

	.tarn-footer {
		height: 90rpx;
		border-top: 1px solid #f2f2f2;
	}

	.middle {
		vertical-align: middle;
	}

	.br-8 {
		border-radius: 16rpx;
	}

	.tran-next-top {
		margin-top: 270rpx;
	}

	.tran-next {
		width: 716rpx;
		height: 274rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.196078431372549);

		.avater-cicrle {
			border-radius: 41rpx;
		}

		.cicrle-top {
			margin-left: 80rpx;
		}

		.avater {
			height: 82rpx;
			width: 80rpx;
		}
	}

	.my-btn {
		border-radius: 40rpx;
		background-color: rgba(71, 109, 234, 1);
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
	}

	.limit-btn {
		width: 570rpx;
		height: 80rpx;
	}

	.abs-top {
		width: 400rpx;
		height: 60rpx;
		border-radius: 8rpx;
		top: -36rpx;
		right: 0rpx;
		border: 1px solid #476dea;

		&::before {
			content: '';
			width: 0;
			height: 0;
			border: 24rpx solid;
			border-color: #476dea transparent transparent transparent;
			position: absolute;
			top: 58rpx;
			left: 80rpx;
			z-index: 9;
		}
	}
</style>